<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
<head>
<base href="<%=basePath%>">

<title>施工人员新增</title>
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="static/p_house/house_index.css" />
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>
<style>
.webuploader-container {
	position: relative;
	top: 5px;
}
</style>
<body>
	<!-- 施工人员 -->
	<div>
		<!-- 表单开始 -->
		<form id="roadWorkPersonForm" action="customer/dm/addRoadWorkPerson"
			method="post">
			<input type="hidden" id="roadwork_articleId">
			<div class="panel panel-default">
				<div class="panel-body ">
					<!-- 管理人员 -->
					<div style="margin:0px 0px 20px 0px;">
						<p style="height:35px;border-bottom:1px solid gray">
							<span class="style_btn">管理人员</span>
						</p>
						<table cellpadding="10" cellspacing="5" class="mytable"
							style="margin-left:5px;">
							<tr>
								<td width="90"><span class="style_btn">施工单位</span></td>
								<td><select id="roadworks2" style="width: 200px;">
								</select></td>
							</tr>
							<tr>
								<td width="90"><span class="style_btn">姓名</span></td>
								<td><input name="staffName" /></td>
							</tr>
							<tr>
								<td><span class="style_btn">授权委托</span></td>
								<td><input name="authorize" /></td>
							</tr>
							<!-- 授权委托附件 -->
							<tr>
								<td></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_shouquan'></div> <!-- 上传按钮 -->
									<div id='filePicker_weituo' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">身份证件</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_idcard'></div> <!-- 上传按钮 -->
									<div id='filePicker_idcard' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">照片</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_zhaopian'></div> <!-- 上传按钮 -->
									<div id='filePicker_zhaopian' style="display: none">上传</div>
								</td>
							</tr>
							<tr>
								<td><span class="style_btn">出入证打印</span></td>
								<td>
									<!-- 缩略图容器 -->
									<div id='list_churudayin'></div> <!-- 上传按钮 -->
									<div id='filePicker_churudayin' style="display: none">上传</div>
								</td>
							</tr>
						</table>
					</div>
					<!-- 专业工种 -->
					<div>
						<p style="height:35px;border-bottom:1px solid gray">
							<span class="style_btn">专业工种</span>&nbsp;&nbsp;&nbsp;&nbsp; <a
								name="zygzAdd" class="btn btn-danger radius a_font"
								onclick="addRwp()"> 添加</a>
						</p>
						<!-- 存放专业工种表单 -->
						<div id="major_job"></div>
					</div>
					<!-- 修改时添加变更说明 -->
			<div style="margin:10px;display:none;" id="rwp_div">
				变更说明<textarea rows="3" name="remark" id="rwpRemark" style="width:70%"></textarea><span style="color:red;">*</span>
			</div>
				</div>
			</div>
			<div id="roadworkPersonBtn"
				style="width:100%;text-align:center; padding-top:20px">
				<br /> <br />
			</div>
			<input hidden="hidden" value="${id }" id="entityId_personId"
				name="personId">
		</form>
		<div style="display: none;">
			<!-- <button class="btn btn-danger radius" id="roadworkPersonEdit"
				onclick="roadworkPersonOpenEdit(this);" type="button">启用编辑</button> -->
			<button class="btn btn-danger radius" id="roadworkPersonTijiao"
				onclick="roadworkPersonSubmit(this);" type="button">提交</button>
			<button class="btn btn-danger radius" id="roadworkPersonSave"
				style="margin-left: 10px;" onclick="roadworkPersonSubmit(this);"
				type="button">保存</button>
			<a class="btn btn-default radius" id="roadworkPersonReset"
				style="margin-left: 10px;" onclick="resetForms('roadWorkPersonForm');">重置 </a>
		</div>
		<!-- 表单结束 -->
		<script type="text/javascript">
			var rpFjList = new Array(); //施工人员删除附件列表
			//施工单位主键
			var rpfkdunitId = "";
			//施工人员操作字段  0:保存 ;1：提交 ;2：修改
			var rWPsersonOpt = 0;
			var delIds = []; //删除的id存储
			var rwPersonFlag = '${rwPersonFlag}';//查看、编辑状态
			$(function() {
				if(rwPersonFlag=='2'){//编辑
					$("#rwp_div").show();
				}
				//初始化 上传插件
				initFileUp();
				//初始化表单
				mySubmit("roadWorkPersonForm", initRoadWorkPersonData, dRoadPersonDataSuccess);
				//当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
				$("div[id^=filePicker] div").css({"width":"60px","height":"30px"});
				//初始化S2
				initRoadWorkS2();
			});
			//保存成功回调
			function dRoadPersonDataSuccess(data, status) {
				layer.close(layer.index);
				if (data.msg) {
					var i = layer.alert("操作成功", {
						offset : '20%',
						shade : 0
					}, function() {
						parent.parent.tabKey = 2;
						parent.parent.tabToken = 0;
						parent.location.reload();
						layer.close(i);
					});
				}
			}
		
			//初始化s2标签，同时将核准材料页面上的s2也初始化了
			function initRoadWorkS2() {
				var $s2 = $("#roadworks2");
				var $s2pf = $("#proofreads2");
				//施工人员
				$s2.select2();
				//核准材料
				$s2pf.select2();
		
				$.getJSON("customer/dm/getAllDecorateUnit", {
					fkcustomerId : parent.fkcustomerId,
					roomId : parent.fkroomId
				}, function(data, status) {
					//防止重复加载
					$s2.find("*").remove();
					$s2pf.find("*").remove();
					//设置默认值,主要用来后面做验证
					$s2.append("<option value=\"\">请选择施工单位</option>");
					$s2pf.append("<option value=\"\">请选择施工单位</option>");
					$s2.val("").trigger("change");
					$s2pf.val("").trigger("change");
					//动态加载数据
					$.each(data, function(i, v) {
						$s2.append("<option value=" + v.id + ">" + v.unitName + "</option>");
						$s2pf.append("<option value=" + v.id + ">" + v.unitName + "</option>");
					});
		
					
					//调用本jsp页面 initRoadWorkPersonEditData 方法初始化表单数据
					initRoadWorkPersonEditData($s2);
				});
				//s2 change事件,修改装修方案全局id变量
				$s2.change(function() {
					rpfkdunitId = $s2.val();
				});
				$s2pf.change(function() {
					pafkdunitId = $s2pf.val();
				});
			}
		
			//初始化表单数据,针对编辑状态
			function initRoadWorkPersonEditData($s2) {
				var personId = $("#roadWorkPersonForm").find("input[name='personId']").val();
				
				if (personId == "") {
					//重置表单
					$("#roadWorkPersonForm")[0].reset();
					//添加重置、保存、提交按钮
					var t = $("#roadworkPersonBtn");
					t.prepend($("#roadworkPersonReset"));
					t.prepend($("#roadworkPersonSave"));
					t.prepend($("#roadworkPersonTijiao"));
					$("#roadWorkPersonForm div[id^='filePicker']").css("display","inline-block");
				} else {
					$.getJSON("customer/dm/getRoadWorkPersonById", {
						id : personId
					}, function(data) {
						if (data) {
							//修改s2默认值
							$s2.val(data.fkdunitId).trigger("change");
							//更改操作字段为修改
							rWPsersonOpt = 2;
							//增加开启编辑按钮
							//$("#roadworkPersonBtn").append($("#roadworkPersonEdit"));
							//管理人员数据
							$("#roadWorkPersonForm input[name='authorize']").val(data.authorize);
							$("#roadWorkPersonForm input[name='staffName']").val(data.staffName);
							//附件数据
							getFileList(data.id, "管理人员授权委托", "#list_shouquan", setrpRFL, imgPlus);
							getFileList(data.id, "管理人员身份证", "#list_idcard", setrpRFL, imgPlus);
							getFileList(data.id, "管理人员照片", "#list_zhaopian", setrpRFL, imgPlus);
							getFileList(data.id, "管理人员出入打印", "#list_churudayin", setrpRFL, imgPlus);
							//专业工种数据
							$.each(data.proDw, function(i, v) {
								addRwp(v.id, v.workType, v.staffName);
								//获取附件数据
								var i = roadworkTpId - 1;
								getFileList(v.id, "专业工种身份证", "#list_idCard_tp" + i, setrpRFL, imgPlus);
								getFileList(v.id, "专业工种照片", "#list_zhaopian_tp" + i, setrpRFL, imgPlus);
								getFileList(v.id, "专业工种出入打印", "#list_churudayin_tp" + i, setrpRFL, imgPlus);
								getFileList(v.id, "专业工种作业证书", "#list_workca_tp" + i, setrpRFL, imgPlus);
							});
		
							
							if(rwPersonFlag == "1"){
								//锁定表单
								$("#roadWorkPersonForm input").attr("readonly", true);
								$("#roadWorkPersonForm select,a[name='zygzAdd']").attr("disabled", true);
			
								$("#roadWorkPersonForm").find(".icon-fullscreen").hide();
								//禁止点击上传按钮
								$("#roadWorkPersonForm div[id^='filePicker']").hide();
							}else{
								//添加重置、保存按钮
								var t = $("#roadworkPersonBtn");
								t.prepend($("#roadworkPersonReset"));
								t.prepend($("#roadworkPersonSave"));
								//显示图片删除按钮 
								$("div.file-item span").show();
								$("#roadWorkPersonForm div[id^='filePicker']").css("display","inline-block");
							}
							
						} else {
							//initFileUp();
							//添加重置、保存、提交按钮
							var t = $("#roadworkPersonBtn");
							t.prepend($("#roadworkPersonReset"));
							t.prepend($("#roadworkPersonSave"));
							t.prepend($("#roadworkPersonTijiao"));
						}
					});
				}
			}
			//设置待删除附件的值到集合中
			function setrpRFL(id, _this) {
				layer.confirm('删除该图片？', {
					title : '警告',
					icon : 0,
					shade : [ 0.1, '#fff' ]
				}, function() {
					rpFjList.push(id);
					//删除指定缩略图
					$("#" + id).remove();
					layer.close(layer.index);
				});
			}
		
			//显示图片删除按钮
			function imgrpBtnShow() {
				//显示图片删除按钮 
				$("div.file-item span").show();
				//禁止点击上传按钮
				$("#roadWorkPersonForm div[id^='filePicker']").unbind("click").show();
			}
		
			//提交表单方法
			function roadworkPersonSubmit(_this) {
				var html = $(_this).html();
				if (rWPsersonOpt != 2) {
					if (html = "提交") {
						rWPsersonOpt = 1;
					} else if (html = "保存") {
						rWPsersonOpt = 0;
					}
					$("#roadWorkPersonForm").submit();
				}else{
					var approvalCount = ${approvalCount};
					if(approvalCount == 0 ){
						//提交表单
						$("#roadWorkPersonForm").submit();
					}else{
						layer.msg("此条数据已提交过审批，不能重复提交");
					}
				}
			}
		
			//开启编辑状态
			function roadworkPersonOpenEdit(_this) {
				var _this = $(_this);
				layer.confirm('开启编辑状态？', {
					shade : [ 0.1, '#fff' ]
				}, function() {
					//删除自己
					_this.remove();
					//添加重置、保存按钮
					var t = $("#roadworkPersonBtn");
					t.prepend($("#roadworkPersonReset"));
					t.prepend($("#roadworkPersonSave"));
					//解锁表单
					//锁定表单
					$("#rwpRemark").show();
					$("#roadWorkPersonForm input").attr("readonly", false);
					$("#roadWorkPersonForm select,a[name='zygzAdd']").attr("disabled", false);
					$("#roadWorkPersonForm").find(".icon-fullscreen").show();
					layer.close(layer.index);
					imgrpBtnShow();
				});
			}
		
			//初始化 上传按钮
			function initFileUp() {
				//初始化管理人员上传按钮
				initWebUpload("filePicker_weituo", "list_shouquan", "管理人员授权委托", "roadwork_articleId", decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_idcard", "list_idcard", "管理人员身份证", "roadwork_articleId", decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_zhaopian", "list_zhaopian", "管理人员照片", "roadwork_articleId", decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_churudayin", "list_churudayin", "管理人员出入打印", "roadwork_articleId",decorationManageUpSccess, undefined, null);
				
			}
			
			function decorationManageUpSccess(file,data){
				successImg(file.id);
				
			}
			//缩略图上传成功回调
			function successImg(id){
				PostbirdImgGlass.init({
					domSelector : "#"+id+" img",
					animation : true,
					myDocument : window.parent.parent.parent
				});
			}
			
			//封装表单数据
			function initRoadWorkPersonData() {
				var mli = layer.load(2);
				//管理人员数据
				var authorize = $("input[name='authorize']").val();
				var staffName = $("input[name='staffName']").val();
				var roadwork_articleId = $("#roadwork_articleId").val();
				//管理工种id
				var roadworkPersonEntityId = $("input[name='personId']").val();
				//专业工种数据
				var zygz = packTemplate();
				var remark = $("#rwpRemark").val();
				if(rWPsersonOpt == "2"){
					if(remark == "" || remark == undefined){
						layer.msg("变更说明不能为空");
						layer.close(mli);
						return null;
					}
				}
				//必须选择施工单位
				if ($("#roadworks2").val() == "") {
					layer.close(mli);
		
					layer.alert("请选择施工单位", {
						offset : '20%',
						shade : 0.1
					});
					return null;
				} else {
					//客户、房间、施工单位这三个id在父页面，全局共用
					return {
						opt : rWPsersonOpt,
						remark : remark,
						mp : {
							id : roadworkPersonEntityId,
							staffType : "管理人员",
							authorize : authorize,
							staffName : staffName,
							accessoryCaList : "[" + roadwork_articleId + "]",
							fkcustomerId : parent.fkcustomerId,
							fkroomId : parent.fkroomId,
							fkdunitId : rpfkdunitId
						},
						pw : zygz,
						delIds : delIds,
						fIds : rpFjList
					};
				}
		
			}
			//本页面图片放大通用方法,同时隐藏上传按钮与图片删除按钮
			function imgPlus(data) {
				if(rwPersonFlag == "1"){
					$("#roadWorkPersonForm span.uploadcancel").hide();
				}else{
					$("#roadWorkPersonForm span.uploadcancel").show();
				}
				$.each(data, function(i, v) {
					
					PostbirdImgGlass.init({
						domSelector : "#" + v.id + " img",
						animation : true,
						//height:'80%',
						myDocument : window.parent.parent.parent
					});
				});
			}
			//表单成功回调
			function roadWorkPersonSuccess(data, status) {
				layer.alert("操作成功!", {
					offset : '20%',
					shade : 0
				}, function() {});
			}
		
			//封装模版数据为数组
			function packTemplate() {
				var arr = new Array();
				//找出所有table，每个table为一组专业工种数据
				var $table = $("#major_job table");
				$.each($table, function(i, v) {
					//隐藏域附件信息集合
					var roadwork_articleId = $(v).find("input[name='rwarticleId']").val();
					//工种
					var workType = $(v).find("input[name='workType']").val();
					//姓名
					var staffname1 = $(v).find("input[name='staffname1']").val();
					var id = $(v).find("input[name='rwpId']").val();
					arr.push({
						accessoryCaList : "[" + roadwork_articleId + "]",
						id : id,
						staffType : "专业工种",
						workType : workType,
						staffName : staffname1,
						fkcustomerId : parent.fkcustomerId,
						fkroomId : parent.fkroomId,
						fkdunitId : rpfkdunitId
					});
				});
				return arr;
			}
		
			//该页面唯一id 用来区别多个专业工作附件id
			var roadworkTpId = 0;
			//添加专业工种模版到页面中
			function addRwp(id, workType, staffName) {
				var node;
				node = createTemplate(id, workType, staffName);
				var oTest = $("#major_job");
				oTest.append(node);
				var i = roadworkTpId - 1;
				initWebUpload("filePicker_idCard_tp" + i, "list_idCard_tp" + i, "专业工种身份证", "roadwork_articleId" + i, parent.decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_zhaopian_tp" + i, "list_zhaopian_tp" + i, "专业工种照片", "roadwork_articleId" + i, parent.decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_churudayin_tp" + i, "list_churudayin_tp" + i, "专业工种出入打印", "roadwork_articleId" + i, parent.decorationManageUpSccess, undefined, null);
				initWebUpload("filePicker_workca_tp" + i, "list_workca_tp" + i, "专业工种作业证书", "roadwork_articleId" + i, parent.decorationManageUpSccess, undefined, null);
				$("#roadWorkPersonForm div[id^='filePicker']").css("display","inline-block");
				if (workType && staffName) {
					//重新设置一下上传控件高度,该开始是隐藏状态 所以要设置一下大小才能被正常点击
					$("#filePicker_idCard_tp" + i + " div").css({
						"width" : "58px",
						"height" : "28px"
					});
					$("#filePicker_zhaopian_tp" + i + " div").css({
						"width" : "58px",
						"height" : "28px"
					});
					$("#filePicker_churudayin_tp" + i + " div").css({
						"width" : "58px",
						"height" : "28px"
					});
					$("#filePicker_workca_tp" + i + " div").css({
						"width" : "58px",
						"height" : "28px"
					});
				}
			}
		
			function delTrRwp(obj) {
				var delId = $(obj).parent().parent().parent().parent().find("input[name='rwpId']").val();
				if (delId != "" && delId != null) {
					layer.msg("保存之后将彻底删除该条数据");
					//有id的数据将id存入数组，传到后台备份删除
					delIds.push(delId);
				}
				$(obj).parent().parent().parent().parent().parent().remove();
			}
			//创建模版
			function createTemplate(id, workType, staffName) {
				/* var html = $("#rwp").html();
				html = html.replace(/roadwork_articleIdtp/g, "roadwork_articleId" + roadworkTpId);
				html = html.replace(/idCard_tp/g, "idCard_tp" + roadworkTpId);
				html = html.replace(/zhaopian_tp/g, "zhaopian_tp" + roadworkTpId);
				html = html.replace(/churudayin_tp/g, "churudayin_tp" + roadworkTpId);
				html = html.replace(/workca_tp/g, "workca_tp" + roadworkTpId); */
		
				var html = $("#rwp div:eq(0)").clone();
				html.find("#roadwork_articleIdtp").attr("id", "roadwork_articleId" + roadworkTpId);
				//修改缩略图id
				html.find("#list_idCard_tp").attr("id", "list_idCard_tp" + roadworkTpId);
				html.find("#list_zhaopian_tp").attr("id", "list_zhaopian_tp" + roadworkTpId);
				html.find("#list_churudayin_tp").attr("id", "list_churudayin_tp" + roadworkTpId);
				html.find("#list_workca_tp").attr("id", "list_workca_tp" + roadworkTpId);
				//修改上传按钮id
				html.find("#filePicker_idCard_tp").attr("id", "filePicker_idCard_tp" + roadworkTpId);
				html.find("#filePicker_zhaopian_tp").attr("id", "filePicker_zhaopian_tp" + roadworkTpId);
				html.find("#filePicker_churudayin_tp").attr("id", "filePicker_churudayin_tp" + roadworkTpId);
				html.find("#filePicker_workca_tp").attr("id", "filePicker_workca_tp" + roadworkTpId);
				//****************如果有参数则将数据带入模版中***************************
				if (id) {
					//设置工种
					html.find("input[name='workType']").val(workType);
					//设置人员姓名
					html.find("input[name='staffname1']").val(staffName);
					//设置专业工种id
					html.find("input[name='rwpId']").val(id);
				}
		
				roadworkTpId++;
				return html;
			}
		</script>
	</div>

	<!-- 模板div -->
	<div id="rwp" style="display:none;">
		<div class="style_border_tem">
			<table cellpadding="10" cellspacing="5" class="mytable"
				style="margin-left:5px;">
				<input type="hidden" id="roadwork_articleIdtp" name="rwarticleId">
				<input type="hidden" name="rwpId" value="" id="entityId_rwpId">
				<tr>
					<td width="90"><span class="style_btn">工种</span></td>
					<td><input name="workType" /></td>
					<td width="90"><span class="style_btn">姓名</span></td>
					<td><input name="staffname1" /></td>
					<td valign="top" align="right"><a href="javascript:void(0)"
						onclick="delTrRwp(this)"> <i class="icon-fullscreen"></i>
					</a></td>
				</tr>
				<tr>
					<td><span class="style_btn">身份证件</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_idCard_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_idCard_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">照片</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_zhaopian_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_zhaopian_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">出入证打印</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_churudayin_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_churudayin_tp' style="display: none">上传</div>
					</td>
				</tr>
				<tr>
					<td><span class="style_btn">作业证书</span></td>
					<td>
						<!-- 缩略图容器 -->
						<div id='list_workca_tp'></div> <!-- 上传按钮 -->
						<div id='filePicker_workca_tp' style="display: none">上传</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>